<script setup>
import {ArrowRight, View, CircleCheck, CircleClose} from '@element-plus/icons-vue'
import {onMounted, reactive, ref} from "vue";
import request from "@/utils/amusement"
import {ElMessage} from "element-plus";
import {Plus,Message} from "@element-plus/icons";

onMounted(() => {
  getNotice();
})

//分页
const currentPage = ref(1)
const pageSize = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals = ref(0);
const noticeInfo = ref([])
const getNotice = () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    // type: JSON.parse(sessionStorage.getItem('loginUser')).teamid
  };
  request({
    url: '/notice2/amusement123',
    method: 'get',
    params,
  }).then((req) => {
    if (req.data.errorCode == 200) {
      noticeInfo.value = req.data.data.records;
      totals.value = req.data.data.total;
      noticeInfo.value.forEach((item) => {
        if (item.ispublic == "同意") {
          approveDisabledMap[item.id] = true;
          rejectDisabledMap[item.id] = true;
        } else if (item.ispublic == "不同意") {
          approveDisabledMap[item.id] = true;
          rejectDisabledMap[item.id] = true;
        } else if (item.ispublic == "未审核") {
          approveDisabledMap[item.id] = false;
          rejectDisabledMap[item.id] = false;
        }
      });
    }
  })
}
const handleSizeChange = (val) => {
  pageSize.value = val;
  getNotice()
}
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getNotice()
}

// 同意和拒绝按钮的禁用状态映射
const approveDisabledMap = reactive({});
const rejectDisabledMap = reactive({});
const statusClass = (ispublic) => {
  switch (ispublic) {
    case '未审核':
      return 'status-normal';
    case '同意':
      return 'status-delayed';
    case '不同意':
      return 'status-cancelled';
    default:
      return '';
  }
};

const judgeData = {
  id: '',
}
const approveAudit = (row) => {
  judgeData.id = row.id,
  // 模拟同意审核操作
  request({
    url: '/sys/funnotice/update',
    method: 'put',
    data: JSON.stringify(judgeData),
    headers: {'content-type': "application/json;charset=UTF-8"},
  }).then(req => {
    if (req.data.errorCode == 200) {
      ElMessage.success("审核通过");
      // row.status = "已同意";
      getNotice();
    }
  })
};

// const rejectAudit = (row) => {
const rejectAudit = () => {
  // judgeData.id = row.id,
  //     judgeData.reason ='123'
  // 模拟拒绝审核操作
  request({
    url: '/sys/funnotice/update2',
    method: 'put',
    data: JSON.stringify(formAdd),
    headers: {'content-type': "application/json;charset=UTF-8"},
  }).then(req => {
    if (req.data.errorCode == 200) {
      ElMessage.success("审核未通过");
      // 这个是控制是否有按钮的
      // row.status = "已拒绝";
      getNotice();
    }
    dialogAddState.value = false
    // 清空表单数据
    Object.assign(formAdd , formAddData)
  })
};
let teamName = JSON.parse(sessionStorage.getItem('loginUser')).team

//////////////  新增模态框相关  ///////////////////////
const dialogAddState = ref(false)

// 新增表单引用
const formAddRef = ref()
// 新增表单初始化数据
const formAddData = {
  id : '' ,
  reason : '' ,
}
// 新增表单绑定数据模型
const formAdd = reactive({...formAddData})   // ...formAddData 解构formAddData
const dialogAddOnSubmit = () => {
  // 数据提交到服务器
  // 服务器端返回成功 ：清空表单，关闭对话框，更新表格内容
  request({
    method: 'post',
    url:'/sys/funnotice/add',
    params:formAdd
  }).then(req => {
    ElMessage({
      type: 'info',
      message:req.data.msg
    })
    if (200 == req.data.errorCode) {
      // console.log("添加成功")
      getNotice()
    }
  });
  dialogAddState.value = false
}
const dialogAddOnReset = () => {
  // 清空表单数据
  Object.assign(formAdd , formAddData)
  // 关闭对话框
  dialogAddState.value = false
}

const openDialog = (row) => {
  // 将row信息存入formAdd中的rowInfo字段
  formAdd.id = row.id;
  // 打开对话框
  dialogAddState.value = true;
};
</script>

<script>

</script>

<template>
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>社团</el-breadcrumb-item>
      <el-breadcrumb-item>{{teamName}}</el-breadcrumb-item>
      <el-breadcrumb-item><b>管理公告</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <!--  数据表格-->
  <div style="margin:20px">
    <el-table :data="noticeInfo" stripe border style="width: 100%">
      <el-table-column prop="id" label="公告序号" width="100px"  />
      <el-table-column prop="content" label="公告内容" />
      <el-table-column prop="publishdt" label="发布时间" width="150px" />
      <el-table-column prop="ispublic" label="状态" width="150px" >
        <template #default="{ row }">
          <!-- 根据状态改变文本颜色 -->
          <span :class="statusClass(row.ispublic)">
            <el-icon v-if="row.ispublic =='同意'"><CircleCheck /></el-icon>
            <el-icon v-if="row.ispublic =='不同意'"><CircleClose /></el-icon>
            <el-icon v-if="row.ispublic =='未审核'"><View /></el-icon>
            <!--            {{ getStatusText(row.ispublic) }}-->
            {{ row.ispublic}}
            </span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200px" align="center">
        <template #default="{ row }">
          <!-- 操作按钮 -->
          <el-button
              type="success"
              size="default"
              :disabled="approveDisabledMap[row.id]"
              @click="approveAudit(row)"
          >
            <el-icon><CircleCheck /></el-icon>同意
          </el-button>
          <el-button
              type="danger"
              size="default"
              :disabled="rejectDisabledMap[row.id]"
              @click="openDialog(row)"
          >
            <el-icon><CircleClose /></el-icon>拒绝
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[1,5,10]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

  <!--   新增模态框 -->
  <el-dialog v-model="dialogAddState" title="退回公告" width="700">
    <div>
      <el-form ref="formAddRef" :model="formAdd" label-width="120px">
        <el-form-item prop="content" label="理由(100字内)">
          <el-input v-model="formAdd.reason"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogAddOnReset">取消</el-button>
        <el-button type="primary"  @click="rejectAudit" >提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
.page{
  margin-left: 30%;
}
.status-normal {
  color: cornflowerblue;
}

.status-delayed {
  color: #42b983;
}

.status-cancelled {
  color: coral;
}
</style>